<template>
  <div class="mineBlog">
    <navContent></navContent>
    <div class="top">
      <div class="left">
        <div class="author-img">
          <img :src="src" alt="用户头像">
        </div>
        <p class="name text">昵称：{{name}}</p>
        <p class="sign text">个签：{{sign}}</p>
        <p class="tel text">联系电话：{{tel}}</p>
        <p class="wx text">微信：{{wx}}</p>
        <p class="address text">住址：{{address}}</p>
      </div>
      <div class="container"> 
        <el-card :body-style="{ height: '200px',padding: '0px',display: 'flex',justifyContent: 'space-between' }" @click.native="goArticleDetail()" v-for="(item, index) in personalArticleLists" :key="index">
          <div style="width:500px;padding: 14px;">
            <span class="tit">{{item.title}}</span>
            <p class="content">{{item.content}}</p>
            <div class="bottom clearfix">
              <span class="author"><i class="el-icon-edit"></i>作者：{{item.author}}</span>
              <span class="time"><i class="el-icon-alarm-clock"></i>发布时间：{{item.createTime}}</span>
              <span class="comments"><i class="el-icon-chat-dot-square"></i>{{item.num}}</span>
            </div>
          </div>
          <img :src='item.src' class="image">
        </el-card>
      </div>
      <div class="right">
        <div class="excellentArticles">
          <div style="padding:5px;border: 1px solid #eee;font-size:12px;background-color:#eee;">TOP10</div>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="changeLists()">换一批</el-button>
        </div>
        <ul class="articlesTit">
          <li v-for="(item, index) in excellentArticleLists" :key="index">
            <a href="javascript:;" style="width:100px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;text-decoration:none;color:#333;">{{item.title}}</a>
            <span>{{item.author}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="foot">
      <el-pagination
        style="margin:0 auto;"
        background
        @current-change="CurrentPageChange"
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import navContent from '@/components/navContent'
export default {
  name: 'mineBlog',
  components: {
    navContent,
  },
  data () {
    return {
      src: '',//用户头像 
      name: '会说话的小蚂蚁',//用户名称
      sign: '这个人很懒什么都没有留下',//个签
      tel: 12345678910,//电话
      wx: '12345678910',//微信
      address: '北京市皇宫',//住址
      currentPage: 1, // 当前页
      // 个人文章列表
      personalArticleLists: [
        {
          title: '好吃的汉堡',
          content: '是风格士大夫敢死队风格看可是大家分工卢卡斯的积分高考历史得分空手道解放高科技的释放回国深刻搭街坊和可是的机会富士康的立法会公司的可见光和深刻搭街坊航空技术的风华高科六点十分和快递费舰队上空飞过很爽快的肌肤光滑',
          author: 'xxx',
          createTime: '2019-10-09',
          num: '3',
          src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
        },
      ],
      // 优秀文章
      excellentArticleLists: [
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        },
        {
          title: '好吃的汉堡',
          author: 'XXXX'
        }
      ]
    }
  },
  methods: {
    // 换一批事件
    changeLists () {
      console.log('换一批')
    },
    // 当前页变化
    CurrentPageChange (num) {
      this.currentPage = num
      console.log(this.currentPage)
    },
    // 去文章详情
    goArticleDetail () {
      this.$router.push('articleDetail')
    }
  }
}
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 10px;
    .left {
      width: 20%;
      height: 300px;
      margin-right: 10px;
      text-align: center;
      // border: 1px solid #ccc;
      background:#fff;
      .author-img {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        margin-top: 20px;
        border: 1px solid #ccc;
        border-radius: 50%;
      }
      .text {
        overflow: hidden;
        text-overflow: ellipsis; 
        white-space: nowrap;
        font-size: 14px;
        color: #666;
        line-height: 1;
      }
    }
    .container {
      width: 60%;
      margin-right: 10px;
      .tit {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
      }
      .content {
        width: 100%;
        font-size: 14px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis; 
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        
      }
      .bottom i {
        margin-right: 5px;
      }
      .time, .comments, .author {
        cursor: pointer;
        font-size: 14px;
        color: #787878;
      }
      .time, .comments {
        margin-left: 10px;
      }
    }
    .right {
      width: 20%;
      height: 320px;
      // border: 1px solid #eee;
      background:#fff;
      .excellentArticles {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        border-bottom: 1px solid #eee; 
      }
      .articlesTit {
        padding: 0 10px;
      }
      .articlesTit li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 12px;
        color: #333;
        cursor: pointer;
      }
    }
  }
  .foot {
    width: 35%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px 0px;
  }
  .el-card {
    margin-bottom:10px;
  }
</style>


